import React from 'react'
import { Form, Input, Button ,Row,Col,message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
// import { connect } from 'react-redux'
import {loginSubmit,getCode} from "../../api"
// import actions from "../../store/actions"
import "./style.scss"
import img from "../../imgs/内网通截图20211125160430.png"
import { useNavigate } from 'react-router';
function index(props:any) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const navigate =useNavigate()
    const onFinish = async(values: any) => {
        const resp=await loginSubmit(values)
        console.log(resp)
        const {code,mes,data}=resp.data
        if(code===200){
            message.success(`${mes},欢迎${data}`)
            localStorage.setItem('token',JSON.stringify(data))
            navigate('/',{state:{data:123}})
        }else{
            message.error(mes)
        }
    };
    const getandSetCode=async()=>{
        const resp:any=await getCode()
        const codes:number=resp.data.data
        message.success(codes)
    }
    return (
        <div className="loginBox">
            <div className="loginContent">
                <img src={img} alt="" />
            <div className='loginWrap'>
                <h1>包图网智能硬件平台</h1>
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>
                <Form.Item label="验证码">
                    <Row gutter={8}>
                    <Col span={12}>
                        <Form.Item
                        name="code"
                        noStyle
                        rules={[{ required: true, message: '请输入验证码!' }]}
                        >
                        <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Button onClick={getandSetCode}>获取验证码</Button>
                    </Col>
                    </Row>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
            </div>
            </div>
        </div>
    )
}


export default index

